<template>
  <div class="input">
    <div class="add-form">
      <el-dialog
        :visible.sync="value"
        width="30%"
        :title="title"
        :before-close="handleClose"
      >
        <el-form
          :rules="rules"
          label-position="30px"
          class="demo-ruleForm"
          ref="form"
          :model="form"
        >
          <el-form-item label="所属学科" :label-width="formLabelWidth">
            <el-select placeholder="请选择" v-model="form.subjectID">
              <el-option
                :label="channel.label"
                :value="channel.value"
                v-for="(channel, idx) in channels"
                :key="idx"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            prop="directoryName"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.directoryName" class="input"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="btn">
          <el-button @click="handleClose" class="">取 消</el-button>
          <el-button type="primary" @click="yes">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { add, update, detail } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'directorys-add',
  props: ['value', 'id'],
  data () {
    return {
      // 验证
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          {
            min: 2,
            max: 30,
            message: '长度在 2 到 30 个字符',
            trigger: 'blur'
          }
        ]
      },
      title: '',
      form: {
        directoryName: this.directoryname,
        subjectID: this.subjectid,
        id: null
      },
      formLabelWidth: '120px',
      channels: []
    }
  },
  created () {
    this.discipline()
    this.open()
  },
  methods: {
    emit () {
      this.$listeners.init && this.$emit('init')
    },
    open () {
      if (this.id) {
        this.title = '编辑目录'
        this.dataDetail()
      } else {
        this.title = '新增目录'
        // this.dataFormSub()
      }
    },
    // 新增目录
    async dataFormSub () {
      await add({
        tagName: this.form.directoryName,
        subjectID: this.form.subjectID
      })
        .then((res) => {
          this.emit()
          this.$emit('input', false)
        })
        .catch((err) => {
          this.$message.error('新增目录失败')
          console.log(err)
        })
    },
    // 获取编辑目录回填
    async dataDetail () {
      try {
        const res = await detail({
          id: this.id
        })
        console.log(res)
        this.form.directoryName = res.data.tagName
        this.form.subjectID = res.data.subjectID
      } catch (err) {
        this.$message.error('编辑目录失败')
      }
    },
    // 编辑后点确定发送请求
    async dataUpdate () {
      try {
        const res = await update({
          tagName: this.form.directoryName,
          subjectID: this.form.subjectID,
          id: this.id
        })
        console.log(res)
        this.emit()
      } catch (err) {
        this.$message.error('编辑目录失败')
      }
    },
    reset () {
      this.form = {
        directoryName: '',
        subjectID: ''
      }
    },
    // 获取下拉框数据
    async discipline () {
      try {
        const res = await simple({})
        this.channels = res.data
      } catch (err) {
        this.$message.error('错了')
      }
    },
    handleClose () {
      this.$emit('input', false)
    },
    yes () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const res = { ...this.form }
          console.log(res)
          if (this.form.id) {
            // 编辑
            this.dataUpdate()
            this.reset()
          } else {
            // 新增
            this.dataFormSub()
            this.reset()
          }
        } else {
          this.$message.error('目录名称未填')
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.input {
  width: 220px;
}
.btn {
  margin-top: -40px;
}
</style>
